<!DOCTYPE html>
<html style="height: 100%" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>旅游论坛热门景点</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
</head>
<body>
<!--样式资源-->
<div th:insert="base/style :: style"></div>
<!--样式资源-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Ly论坛</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a onclick="skip_to(INDEX,'')" href="javascript:void(0)"><i class="icon-home"></i> 首页 <span class="sr-only">(current)</span></a></li>
                <li><a href="#"><i class="icon-fire"></i> 景点信息</a></li>
                <li><a onclick="skip_to(FORUM_INDEX,'')" href="javascript:void(0)"><i class="icon-star-half-empty"></i> 论坛版块</a></li>
                <li><a onclick="skip_to(SAFE_INDEX,'')" href="javascript:void(0)"><i class="icon-book"></i> 安全知识</a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="hidden" th:value="${session.id}" id="uid">
                    <input type="text" class="form-control" placeholder="输入景点名称" id="search">
                </div>
                <button type="button" onclick="if($('#search').val() !== ''){getScenic(SCENIC_TITLE,$('#search').val());}else{alert('请输入搜索关键字!')};" class="btn btn-default"><i class="icon-search"></i> </button>

            </form>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="dropdown-toggle" onclick="showNotice()" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="icon-bullhorn">公告</i> </a></li>
                <li th:if="${session.id!=null}"><a href="#" class="dropdown-toggle" onclick="showMessage()" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="icon-envelope">&nbsp;<small><span id="message_nums"></span></small>条新消息</i> </a></li>
                <li th:if="${session.id!=null}" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="icon-user"></i> <span th:text="${session.nickname}"></span> <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a onclick="skip_to(USER_INDEX,'')"><i class="icon-home"></i> 个人主页</a></li>
                        <li><a onclick="skip_to(USER_SET,'')"><i class="icon-cog"></i> 设置</a></li>
                        <li><a onclick="userLogout()"><i class="icon-signout"></i> 注销</a></li>
                        <li role="separator" class="divider"></li>
                        <!--<li><a href="#"><i class="icon-wrench"></i> 帮助</a></li>-->
                    </ul>
                </li>
                <li th:if="${session.id==null}"><a onclick="showLogin()" ><i class=""></i> 登录</a></li>
                <li th:if="${session.id==null}"><a onclick="showRegister()"><i class=""></i> 注册</a></li>
            </ul>
        </div>
    </div>
</nav>
<!--hidden-->
<div th:insert="base/hidden :: hidden"></div>
<!--hidden-->
<div id="content"  style="padding-bottom: 30px">
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-8">
            <div class="row" id="value">
            </div>
            <div class="row" id="list">
            </div>
        </div>
        <div class="col-md-3">
            <div class="row">
                <div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>景点地址搜索</legend>
                    </fieldset>
                </div>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="输入要查看的景点的地址" id="search_address">
                    </div>
                    <button type="button" onclick="if($('#search_address').val() !== ''){getScenic(SCENIC_ADDRESS,$('#search_address').val());}else{alert('请输入搜索关键字!')};" class="btn btn-default"><i class="icon-search"></i> </button>
                </form>
            </div>
            <div class="row">
                <div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>州/国家/城市搜索</legend>
                    </fieldset>
                </div>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="关键字，如：亚洲、中国、北京" id="search_type">
                    </div>
                    <button type="button" onclick="if($('#search_type').val() !== ''){getScenic(SCENIC_TYPE,$('#search_type').val());}else{alert('请输入搜索关键字!')};" class="btn btn-default"><i class="icon-search"></i> </button>
                </form>
            </div>
            <div class="row"></div>
        </div>
    </div>
</div>

<!--页脚-->
<div th:insert="base/footer :: footer"></div>
<!--页脚-->

<script type="text/javascript">


   let getScenic = function(url,value) {
        layui.use('layer', function() {
            let load = layer.load(2);
            axios.get(url+value)
                .then(function (response) {
                    let str = "";
                    $.each(response.data.data,function (index,item) {
                        str += '     <fieldset class="layui-elem-field">\n' +
                            '                <legend>'+item.title+'</legend>\n' +
                            '                <div class="layui-field-box">\n' +
                            '                    <div class="col-md-2" style="height: auto">\n' +
                            '                        <img  class="img-thumbnail" src="'+item.image+'">\n' +
                            '                    </div>\n' +
                            '                    <div class="col-md-6" style="margin-left: -10px">\n' +
                            '                        <h3>'+item.title+'</h3>\n' +
                            '                        <p style="margin-top: 3%;"><span style="color: red">'+item.lev+'景区</span> <span>'+item.area+'</span> <span style="color: gold">'+item.hot+'</span></p>\n' +
                            '                        <p style="margin-top: 1%"><span>地址: '+item.address+'</span><span>&nbsp;&nbsp;<a  title = "'+item.title+'" id="'+item.point+'"  style="text-decoration: none" onclick="showMap(this.title,this.id)"><i class="icon-map-marker"></i></a></span></p>\n' +
                            '                        <p style="margin-top: 1%"><span>'+item.slogen+'</span></p>\n' +
                            '                        <p style="margin-top: 1%"><span>价格：￥'+item.price+'起</span> <span>月销量：'+item.sold+'</span> <span><a href="'+item.url+'" style="text-decoration: none;color: #00b4ef" target="_blank">点击查看详情</a></span></p>\n' +
                            '                    </div>\n' +
                            '                </div>\n' +
                            '            </fieldset>'
                    });
                    layer.close(load);
                    $("#list").html(str);
                })
                .catch(function (error) {
                    console.log(error);
                });
        });
    };
   getScenic(SCENIC_TYPE,"中国");
   function showMap(title,id){
       var p = id.split(",");
       var x = p[0];
       var y = p[1];
       var ggPoint = new BMap.Point(x,y);
       layer.open({
           type: 2,
           title: title+'景点地图',
           shadeClose: true,
           shade: false,
           maxmin: true, //开启最大化最小化按钮
           area: ['893px', '600px'],
           content: '//api.map.baidu.com/marker?location='+ggPoint.lat+','+ggPoint.lng+'&title=景点位置&content='+title+'&output=html'
       });
   }
</script>
</body>
</html>
